<template>
  <div class="container">
    <div class="menu">
      <div @click="toPage('system')">system</div>
      <div @click="toPage('pm')">pm</div>
      <div @click="toPage('test')">test</div>
    </div>
    <div class="child">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const toPage = (path: string) => {
  router.push({ path: "/" + path });
};
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.container {
  display: flex;
}
.menu {
  width: 200px;
  height: 100vh;
  border-right: 1px solid blue;
}
.child {
  flex: 1;
}
</style>
